<template>
  <div>
    <nav-header
      :headerTitle="'我的店铺'"
      :headerNext="'设置背景'"
      :navMainColor="show.navMainColor"
      :navBgColor="show.navBgColor"
      @tap2next="goUrl('setBg',{shopId:show.shopId})"
    ></nav-header>
    <section class="page">
      <div id="myFiter"></div>
      <div class="p-img">
        <img class="pi-imgOne" :src="show.setBg" alt />
        <div class="p-task"></div>
      </div>
      <div class="p-section">
        <div class="pc-itemsLR">
          <span class="spanOne">上传LOGO</span>
          <img class="imgTwo" src="@/assets/images/xinhao.png" alt />
          <span class="spanTwo">良好的形象更容易被加粉</span>
          <img
            class="imgOne"
            src="@/assets/images/logo.png"
            @click="upImg('logoUrl')"
            alt
            v-show="!show.logoUrl"
          />
          <img class="imgOne" :src="show.logoUrl" alt v-show="show.logoUrl"  @click="upImg('logoUrl')" />
          <div class="px-line"></div>
        </div>
        <div class="pc-itemsInput">
          <span>设置店名</span>
          <img class="imgSpanFour" src="@/assets/images/xinhao.png" alt />
          <input type="text" placeholder="响亮的店名更容易吸引顾客" v-model="show.shopName" />
          <div class="px-line"></div>
        </div>
        <div class="pc-itemsTextarea">
          <span>店铺简介</span>
          <img src="@/assets/images/xinhao.png" alt />
          <textarea
            name="shop"
            cols="30"
            rows="10"
            placeholder="给店铺写个简介吧"
            @blur="animateWidth('blur')"
            @focus="animateWidth('focus')"
            v-model="show.shopDetail"
          ></textarea>
          <div class="px-line"></div>
        </div>
        <div class="pc-itemsFour">
          <span class="spanOne">您的联系方式</span>
          <span class="spanTwo">请正确设置您的联系方式，对您产品感兴趣的朋友，代理才可以联系到您哦。</span>
          <div class="px-line"></div>
        </div>
        <div class="pc-itemsInput">
          <span>手机号</span>
          <input type="number" placeholder="请输入手机号" v-model="show.phone" />
          <div class="px-line"></div>
        </div>
        <div class="pc-itemsInput">
          <span>QQ号</span>
          <input type="number" placeholder="请输入QQ号" v-model="show.qqName" />
          <div class="px-line"></div>
        </div>
        <div class="pc-itemsLR">
          <span class="spanOne">微信号</span>
          <img class="imgTwo3" src="@/assets/images/xinhao.png" alt />
          <span class="spanTwo">请上传正确的二维码</span>
          <button @click="upImg('wxEwma')" v-show="!show.wxEwma">上传</button>
          <img class="imgThree" :src="show.wxEwma" alt v-show="show.wxEwma" @click="upImg('wxEwma')" />
          <div class="px-line"></div>
        </div>
        <div class="pc-right" @click="erwmaSee">如何获取我的微信二维码图片？</div>
      </div>
      <div class="p-footer">
        <div class="btn" v-show="!show.isEdit" @click="save">创建店铺</div>
        <div class="btn" v-show="show.isEdit" @click="save">保存店铺信息</div>
      </div>
    </section>
  </div>
</template>

<script>
import Vue from "vue";
import { Dialog, Toast } from "vant";
Vue.use(Dialog).use(Toast);
import navHeader from "@/components/NavHeader";
import mixin from "@/utils/mixin";
export default {
  name: "EditShop",
  mixins: [mixin],
  components: {
    navHeader
  },
  data() {
    return {
      show: {
        navBgColor: "rgba(0, 0, 0, 0)",
        navMainColor: "#fff",
        isEdit: false,
        shopId: "",
        setBg: "",
        logoUrl:
          "https://yfunchat.oss-cn-shenzhen.aliyuncs.com/micro-ads/shop/bg/bg2.png",
        wxEwma:
          "https://yfunchat.oss-cn-shenzhen.aliyuncs.com/micro-ads/shop/bg/bg2.png",
        // logoUrl: "",
        // wxEwma: "",
        shopName: "",
        shopDetail: "",
        phone: "",
        qqName: "",
        webUrl: ""
      },
      params: {}
    };
  },
  created() {
    if (this.$route.query.shopId) {
      this.show.isEdit = true;
      this.show.shopId = this.$route.query.shopId;
    } else {
      this.show.isEdit = false;
    }
  },
  mounted() {
    window.addEventListener("scroll", this.nextScroll);
    this.initDialog();
    this.init();
    this.isKeyBord();
  },
  //销毁滑动事件
  beforeDestroy() {
    window.removeEventListener("scroll", this.nextScroll);
  },
  methods: {
    init() {
      if (this.show.isEdit) {
        this.params = {
          uniqueId: window.localStorage.uniqueId
        };
        this.$http.post("shop/getUserShopInfo", this.params).then(
          res => {
            //console.log(res);
            res = res.data.shopInfo;
            this.show.shopName = res.shopName;
            this.show.logoUrl = res.shopLogoUrl;
            this.show.shopDetail = res.shopBriefIntro;
            this.show.wxEwma = res.shopOwnerWxQrcodeUrl;
            this.show.phone = res.shopOwnerTelNum;
            this.show.qqName = res.shopOwnerQqNum;
            this.show.webUrl = res.shopThirdPartyWebUrl;
            if (this.$route.query.setBg) {
              this.show.setBg = this.$route.query.setBg;
            } else {
              this.show.setBg = res.shopBgUrl;
            }
          },
          err => {
            console.log(err);
          }
        );
      } else {
        if (this.$route.query.setBg) {
          this.show.setBg = this.$route.query.setBg;
        } else {
          this.show.setBg =
            "https://yfunchat.oss-cn-shenzhen.aliyuncs.com/micro-ads/shop/bg/bg1.png";
        }
      }
    },
    nextScroll: function() {
      let scrollDiff = this.getScrollTop();
      console.log(scrollDiff);
      if (scrollDiff >= 100) {
        this.show.navBgColor = "#fff";
        this.show.navMainColor = "#303133";
      } else {
        this.show.navBgColor = "rgba(0, 0, 0, 0)";
        this.show.navMainColor = "#fff";
      }
    },
    save: function() {
      if (!this.show.logoUrl) {
        Toast({
          forbidClick: true,
          message: "请上传LOGO!"
        });
        return false;
      }
      if (!this.show.shopName) {
        Toast({
          forbidClick: true,
          message: "请设置店名!"
        });
        return false;
      }
      if (!this.show.shopDetail) {
        Toast({
          forbidClick: true,
          message: "请填写店铺简介"
        });
        return false;
      }
      if (!this.show.wxEwma) {
        Toast({
          forbidClick: true,
          message: "请上传微信二维码!"
        });
        return false;
      }
      this.params = {
        shopName: this.show.shopName,
        shopBgUrl: this.show.setBg,
        shopLogoUrl: this.show.logoUrl,
        shopBriefIntro: this.show.shopDetail,
        shopOwnerWxQrcodeUrl: this.show.wxEwma,
        shopOwnerTelNum: this.show.phone,
        shopOwnerQqNum: this.show.qqName,
        shopThirdPartyWebUrl: this.show.webUrl
      };
      let url = "";
      if (this.show.isEdit) {
        this.params.shopId = this.$route.query.shopId;
        url = "shop/reviseShopInfo";
      } else {
        this.params.uniqueId = window.localStorage.uniqueId;
        url = "shop/establishShop";
      }
      this.$http.post(url, this.params).then(
        res => {
          console.log(res);
          Toast.success({
            forbidClick: true,
            message: "保存成功",
            onClose: () => {
              this.goUrl("myShop", {});
            }
          });
        },
        err => {
          console.log(err);
        }
      );
    },
    upImg(type) {
      //alert(type);
      let method='';
      if(type == "wxEwma"){
        method='userWxQrcodeImg';
      }else{
        method='shopImg';
      }
      let parmas = {
        maxCount: 1, //选择相册的最大数，若是相机拍照则只能为1
        sourceType: ["album", "camera"], //相册&&拍照，可选其一
        method: method
      };
      this.$bridge.callHandler("chooseImages", parmas, res => {
        let imagesArr = res.split(",");
        if (type == "logoUrl") {
          this.show.logoUrl = imagesArr[0];
        } else if (type == "wxEwma") {
          this.show.wxEwma = imagesArr[0];
        }
      });
    },
    initDialog() {
      Dialog.setDefaultOptions({
        messageAlign: "center",
        cancelButtonColor: "#303133",
        confirmButtonColor: "#FF2525",
        closeOnPopstate: true
      });
    },
    erwmaSee() {
      Dialog.confirm({
        message:
          "打开微信：我的, 个人信息，我的二维码，点击右上角保存然后就可以上传了",
        showCancelButton: false,
        confirmButtonText: "我知道了"
      });
    },
    //判断是否失去焦点
    animateWidth(type) {
      if (type == "blur") {
        //失去焦点
        this.isScroll(true);
      } else {
        this.isScroll(false);
      }
    },
    isKeyBord() {
      let that = this;
      window.onresize = function() {
        let scrollDiff = that.getClientHeight();
        //alert(scrollDiff);
        if (scrollDiff < window.screen.height / 2) {
          that.isScroll(false);
        } else {
          that.isScroll(true);
        }
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.null32 {
  width: 100%;
  height: 32px;
}
.null78 {
  width: 100%;
  height: 78px;
}
.page {
  .p-img {
    width: 100%;
    height: 342px;
    position: relative;
    .p-task {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0.48;
      background: #000000;
    }
    .pi-imgOne {
      width: 100%;
      height: 100%;
    }
  }
  .p-section {
    .pc-right {
      box-sizing: border-box;
      width: 100%;
      text-align: right;
      padding-right: 32px;
      margin-top: 29px;
      font-family: PingFangSC-Regular;
      font-size: 28px;
      color: #ff2525;
    }
    .px-line {
      height: 1px;
      background: rgba(237, 237, 237, 1);
      position: absolute;
      left: 32px;
      right: 32px;
      bottom: 0px;
    }
    .pc-itemsLR {
      width: 100%;
      height: 164px;
      background: #fff;
      position: relative;
      .imgOne {
        width: 108px;
        height: 108px;
        position: absolute;
        right: 32px;
        top: 28px;
        border-radius: 50%;
      }
      .imgTwo {
        width: 16px;
        height: 15px;
        position: absolute;
        left: 210px;
        top: 50px;
      }
      .imgTwo3 {
        width: 16px;
        height: 15px;
        position: absolute;
        left: 150px;
        top: 50px;
      }
      button {
        width: 118px;
        height: 64px;
        line-height: 64px;
        text-align: center;
        background: #ff2525;
        border-radius: 30px;
        position: absolute;
        right: 50px;
        top: 45px;
        font-family: PingFangSC-Regular;
        font-size: 30px;
        color: #ffffff;
      }
      .imgThree {
        width: 100px;
        height: 100px;
        position: absolute;
        right: 32px;
        top: 32px;
      }
      .spanOne {
        font-size: 34px;
        font-family: PingFangSC-Regular;
        font-weight: bold;
        color: rgba(48, 49, 51, 1);
        position: absolute;
        left: 32px;
        top: 33px;
      }
      .spanTwo {
        font-size: 30px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(129, 129, 129, 1);
        position: absolute;
        left: 32px;
        top: 90px;
      }
    }
    .pc-itemsInput {
      width: 100%;
      height: 202px;
      background: #fff;
      position: relative;
      .imgSpanThree {
        width: 16px;
        height: 15px;
        position: absolute;
        left: 146px;
        top: 49px;
      }
      .imgSpanFour {
        width: 16px;
        height: 15px;
        position: absolute;
        left: 180px;
        top: 49px;
      }
      span {
        font-size: 34px;
        font-family: PingFangSC-Regular;
        font-weight: bold;
        color: rgba(48, 49, 51, 1);
        position: absolute;
        left: 32px;
        top: 32px;
      }
      input {
        border: none;
        outline: none;
        font-size: 30px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        width: 686px;
        position: absolute;
        left: 32px;
        top: 104px;
      }
      input::-webkit-input-placeholder {
        color: rgba(129, 129, 129, 1);
      }
    }
    .pc-itemsTextarea {
      width: 100%;
      height: 300px;
      background: #fff;
      position: relative;
      img {
        width: 16px;
        height: 15px;
        position: absolute;
        left: 180px;
        top: 49px;
      }
      span {
        font-size: 34px;
        font-family: PingFangSC-Regular;
        font-weight: bold;
        color: rgba(48, 49, 51, 1);
        position: absolute;
        left: 32px;
        top: 32px;
      }
      textarea {
        border: none;
        outline: none;
        font-size: 30px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        width: 686px;
        height: 150px;
        position: absolute;
        left: 32px;
        top: 104px;
        resize: none;
      }
      textarea::-webkit-input-placeholder {
        color: rgba(129, 129, 129, 1);
      }
    }
    .pc-itemsFour {
      width: 100%;
      height: 261px;
      background: #fff;
      position: relative;
      .spanOne {
        font-size: 40px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(48, 49, 51, 1);
        font-weight: bold;
        position: absolute;
        left: 32px;
        top: 48px;
      }
      .spanTwo {
        width: 686px;
        height: 84px;
        font-size: 28px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(129, 129, 129, 1);
        position: absolute;
        left: 32px;
        top: 128px;
      }
    }
  }
  .p-footer {
    width: 100%;
    margin-top: 113px;
    margin-bottom: 16px;
    .btn {
      font-size: 34px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      width: 562px;
      height: 88px;
      line-height: 88px;
      margin: auto;
      text-align: center;
      background: rgba(255, 37, 37, 1);
      border-radius: 44px;
    }
  }
}
</style>
